<template>
	<view style="width: 100%;display: flex;">
		<view class="left">
			<manage></manage>
		</view>
		<view style="width: 90%;">
			<uni-search-bar placeholder="搜索 作品名称 或 系列名称" bgColor="#EEEEEE" @confirm="search" v-model="searchValue"
				@cancel="seachCancel" />
			<uni-table border stripe type="selection" emptyText="暂无更多数据" selection-change="multipleChoose">
				<uni-tr>
					<uni-th align="center" width="90">序号</uni-th>
					<uni-th align="center" width="90">系列编号</uni-th>
					<uni-th align="center">系列图片</uni-th>
					<uni-th align="center">系列名称</uni-th>
					<uni-th align="center">上次修改时间</uni-th>
					<uni-th align="center">作品名称</uni-th>
					<uni-th align="center">简介</uni-th>
					<uni-th align="center">
						<uni-row>
							<uni-col :span="12" style="margin-right: 10;">
								<button type="primary" plain size="mini" @click="addWorksDialog" style="width: 100px;">
									新增
								</button>
							</uni-col>
							<uni-col :span="12">
								<button type="warn" plain size="mini" @click="delSelect" style="width: 100px;">
									多选删除
								</button>
							</uni-col>
						</uni-row>
					</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in baseData" :key="index">
					<uni-td align="center">{{index}}</uni-td>
					<uni-td align="center">{{item.id}}</uni-td>
					<uni-td align="center">
						<image :src="item.imagePath" style="width: 60px;height: 60px;"></image>
					</uni-td>
					<uni-td align="center">{{item.series}}</uni-td>
					<uni-td align="center">{{item.createTime}}</uni-td>
					<uni-td align="center">{{item.worksName}}</uni-td>
					<uni-td align="center" style="word-wrap: break-word;width: 20%;"><text>{{item.introduce}}</text>
					</uni-td>
					<uni-td align="center" style="word-wrap: break-word;width: 20%;">
						<view class="uni-group">
							<button class="uni-button" size="mini" plain type="primary" @click="edit(index)">修改</button>
							<button class="uni-button" size="mini" plain type="warn" @click="del(index)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<uni-popup ref="addWorksDialog" type="dialog" style="width: 500px;">
			<scroll-view scroll-y="true" class="scroll-Y">
				<uni-popup-dialog ref="inputClose" title="添加系列作品" @confirm="addConfirm">
					<uni-forms ref="addWorks" :modelValue="addWorks" labelWidth="80px">
						<uni-forms-item label="系列图片:">
							<input class="upload-style" ref="img" type="file" placeholder="上传" />
						</uni-forms-item>
						<uni-forms-item label="系列名称:">
							<uni-easyinput v-model="addWorks.series"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="作品名称:">
							<uni-easyinput v-model="addWorks.worksName"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="简介">
							<uni-easyinput v-model="addWorks.introduce" type="textarea" maxlength="-1"></uni-easyinput>
						</uni-forms-item>
					</uni-forms>
				</uni-popup-dialog>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import manage from "@/components/manage/manage.vue";
	export default {
		components: {
			manage,
		},
		data() {
			return {
				searchValue: "",
				baseData: [],
				editWorks: {},
				addWorks: {
					introduce: "",
					series: "",
					worksName: ""
				},
			}
		},
		methods: {
			addConfirm(){
				uni.uploadFile({
					url: this.api.seriesWorks,
					name: "img",
					file: this.img,
					formData: {
						'seriesWorksJson': JSON.stringify(this.works)
					},
					success: (res) => {
						if (res.data) {
							uni.showToast({
								title: "已提交"
							})
							let sc = JSON.parse(res.data)
						}
					},
					fail: (fa) => {
						this.utilList.faToast()
					}
				})
			},
			addWorksDialog() {
				this.$refs.addWorksDialog.open()
			},
			seachCancel(e) {
				this.initBaseData()
			},
			search() {
				uni.request({
					url: this.api.seriesWorks + "searchWorks",
					method: 'GET',
					data: {
						searchText: this.searchValue
					},
					success: res => {
						console.log(res);
						if (res.data) {
							this.baseData = res.data.obj
						}
					}
				});
			},
			initBaseData() {
				uni.request({
					url: this.api.seriesWorks,
					method: "GET",
					success: (res) => {
						if (res.statusCode == 200) {
							this.baseData = res.data
							console.log(this.baseData);
						}
					}
				})
			},
			onLoad() {
				this.initBaseData()
			}
		},
	}
</script>


<style scoped>
	.upload-style {
		border: 1px solid #e5e5e5;
		text-align: center;
		height: 34px;
		border-radius: 4px;
		cursor: pointer;
	}

	.grid {
		/* margin-left: 10px; */
	}

	.left {
		height: 100%;
		width: 10%;
	}

	.uni-button {
		width: 80px;
		margin: 0 10px 0 10px;
	}

	uni-button {
		font-size: 7px;
		border-radius: 18px;
	}
	.scroll-Y {
		margin-top: 20px;
		height: 90%;
	}
</style>
